<template>
  <!-- 地球表面的线和直线 -->
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
// http://localhost:8081/Apps/Sandcastle/index.html?src=development%2FPolylines%20On%20Terrain.html&label=Development
const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    terrain: Cesium.Terrain.fromWorldTerrain(),
  });
  const line1Position = Cesium.Cartesian3.fromDegreesArray([
    -112.1340164450331,
    36.05494287836128,
    -112.08821010582645,
    36.097804071380715,
    -112.13296079730024,
    36.168769146801104,
    -112.10828895143331,
    36.20031318533197,
    -112.138548165717,
    36.1691100215289, // hairpins
    -112.11482556496543,
    36.20127524083297,
    -112.15921333464016,
    36.17876011207708,
    -112.14700151155604,
    36.21683132404626,
    -112.20919883052926,
    36.19475754001766,
  ]);

  const loopPositions = Cesium.Cartesian3.fromDegreesArray([
    -111.94500779274114, 36.27638678884143, -111.90983004392696,
    36.07985366173454, -111.80360100637773, 36.13694878292542,
    -111.85510122419183, 36.26029588763386, -111.69141601804614,
    36.05128770351902,
  ]);

  const instance1 = new Cesium.GeometryInstance({
    geometry: new Cesium.GroundPolylineGeometry({
      positions: line1Position,
      loop: false,
      width: 4,
    }),
    id: "line1",
    attributes: {
      show: new Cesium.ShowGeometryInstanceAttribute(),
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.fromCssColorString("green").withAlpha(0.7)
      ),
    },
  });
  const instance2 = new Cesium.GeometryInstance({
    geometry: new Cesium.GroundPolylineGeometry({
      positions: loopPositions,
      loop: true,
      width: 8.0,
    }),
    id: "line2",
    attributes: {
      show: new Cesium.ShowGeometryInstanceAttribute(),
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.fromCssColorString("#67ADDF").withAlpha(0.7)
      ),
    },
  });

  const polylineOnTerrainPrimitive = new Cesium.GroundPolylinePrimitive({
    geometryInstances: [instance1, instance2],
    // debugShowShadowVolume: false,
  });
  viewer.scene.groundPrimitives.add(polylineOnTerrainPrimitive);
  viewer.camera.lookAt(
    line1Position[1],
    new Cesium.Cartesian3(50000.0, 50000.0, 50000.0)
  );
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
